<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width">
    <title>烦死了</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            transition:300ms;
        }
        body{
            background: #ededed;
        }
        .box{
            width: 100%;
            max-width: 560px;
            height: 1000px;
            background: #fff;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        .headImg{
            position: relative;
            text-align: center;
            width: 100%;
            height: 120px;
            background: rgb(232, 0, 1);
        }
        .headImg img,canvas{
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            background: inherit;
            border:4px solid rgba(0,0,0,0);

        }
        .imgC{
            position: absolute;
            margin-top: 50px;
            width: 100px;
            height: 100px;
            left: 50%;
            margin-left:-52px;
        }
        .canvasL{
            left: 50px;
        }
        .canvasR{
            right: 50px;
        }
        .canvasI{
            margin-top: 85px;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="headImg" id="banner">
        <canvas class="canvasL canvasI" id="canvasL" width="40" height="40">？？</canvas>
        <img  src="http://q1.qlogo.cn/g?b=qq&nk=1160495477&s=100" alt="loading" class="imgC" id="imgC">
        <canvas class="canvasR canvasI" id="canvasR" width="40" height="40">？？</canvas>
    </div>
</div>
</body>
<script>
    function canvas() {
        var cl=document.getElementById("canvasL");
        var clc=cl.getContext('2d');
        clc.beginPath();
        clc.rect(0,0,cl.width,cl.height);
        clc.fillStyle="#fff";
        clc.fill();
        clc.closePath();

        var cr=document.getElementById("canvasR");
        var crc=cr.getContext('2d');
        crc.beginPath();
        crc.rect(0,0,cr.width,cr.height);
        crc.fillStyle="#fff";
        crc.fill();
        crc.closePath();
    }canvas();
    function bannerClick() {
        localStorage.clear();
        var banner=document.getElementById("banner");
        var imgC=document.getElementById("imgC");
        var canvasL=document.getElementById("canvasL");
        var canvasR=document.getElementById("canvasR");
        var isHeadImgClicked=true;

        imgC.onclick=clickHeadImg;

        function clickHeadImg() {
            isHeadImgClicked?small():big();
        }
        function small() {
            imgC.style.cssText="margin-top:10px;border:4px #fff solid;";
            banner.style.cssText="height:200px";
            canvasL.style.cssText="left:-60px;margin-top:185px;";
            canvasR.style.cssText="right:-60px;margin-top:185px;";
            isHeadImgClicked=false;
            localStorage.setItem("local",isHeadImgClicked);
        }
        function big() {
            imgC.style.cssText="";
            banner.style.cssText="";
            canvasL.style.cssText="";
            canvasR.style.cssText="";
            isHeadImgClicked=true;
            localStorage.setItem("local",isHeadImgClicked);
        }
    }bannerClick();
</script>
</html>